<template>
<div class="movie-detail-filter-container">
    <div class="date-tab">
        <nut-tabs :title-gutter="15" v-model="tabTimesIndex" type="smile" title-scroll>
        <nut-tab-pane v-for="(item,index) in tabTimesList" :pane-key="index" :title="`${item.t} ${item.a}`">
        </nut-tab-pane>
        </nut-tabs>
    </div>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref,toRefs,watch } from 'vue';
import moment from "moment";
const tabTimesIndex = ref(0)
const tabTimesList:any = ref([])
const props = defineProps({
  //子组件接收父组件传递过来的值
  data: Object,
});
//使用父组件传递过来的值
const { data:timesList } = toRefs(props);
onMounted(() => {
  getTimes()
});
const emit = defineEmits(['onChanged'])
watch(tabTimesIndex,(index)=>{
  emit('onChanged',tabTimesList.value[index])
})
watch(tabTimesList,()=>{
  emit('onChanged',tabTimesList.value[0])
})
const getTimes = () => {
    const times = timesList?.value
    const arr:any = []
    times?.forEach(item => {
        const time = item.de_show_time
        let t = getweek(moment(time).startOf('day').format('E'))
        if(time === moment().format('YYYY-MM-DD')){
            t = '今天'
        }else if(time === moment().subtract(-1,'days').format('YYYY-MM-DD')){
            t = '明天'
        }else if(time === moment().subtract(-2,'days').format('YYYY-MM-DD')){
            t = '后天'
        }
        arr.push({
            time: time,
            t: t,
            a: time.substr(5,9)
        })
    });
    tabTimesList.value = arr
}
const getweek = (val) => {
  const week = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    return week[val - 1];
};
</script>
<style lang="scss">
.movie-detail-filter-container{
    display: flex;
    flex-direction: column;
    .nut-tabs{
        .nut-tabs__titles{
            background: #ffffff !important;
            .nut-tabs__titles-item{
                .nut-tabs__titles-item__smile{
                display: none;
                }
                .nut-tabs__titles-item__text{
                    color: #858a99;
                }
            }
            .nut-tabs__titles-item.active{
                .nut-tabs__titles-item__smile{
                display: block;
                    margin-top: 10px;
                }
                .nut-tabs__titles-item__text{
                    color: #15181d;
                }
            }
        }
        .nut-tabs__content{
            display: none !important;
        }
    }
}
</style>